<template>
  <div class="one">
    <div class="one1">
      <van-search v-model="value" shape="round" background="" placeholder="请输入搜索关键词" />
    </div>
    <div class="one2">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width: 692px; height: 300px;" />
        </van-swipe-item>
      </van-swipe>
      <img src="./components/images/首页_03.gif" alt="">
      <img src="./components/images/1_03.gif" alt="">
    </div>
    <div class="one3">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>

    </div>
  </div>

</template>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.one {
  width: 692px;
  height: 1199px;
  /* background: pink; */
  float: left;
}

.one1 {
  width: 692px;
  height: 74px;
  /* background: #ccc; */
  float: left;
}

.one2 {
  width: 692px;
  height: 1015px;
  /* background: green; */
  float: left;
}

.one3 {
  width: 692px;
  height: 105px;
  /* background: red; */
  float: left;
}
</style>
<script setup>
// export default {
// setup() {
const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
//   return { images };
// },
// };
import { ref } from 'vue';

// export default {
  // setup() {
    const active = ref(0);
//     return { active };
//   },
// };
</script>